<!--  -->
<template>
  <div>
  
    <el-form
    ref="ruleFormRef"
    :model="data"
    label-width="auto"
    class="ruleForm"
  >
    <el-form-item label=" 老人姓名" prop="name">
      <el-input v-model="data.name"  placeholder="请输入姓名"  />
    </el-form-item>
    <el-form-item label="老人性别" prop="gender">
        <el-select v-model="data.gender" placeholder="请选择性别">
        <el-option label="男" value="1" />
        <el-option label="女" value="0" />
      </el-select>
    </el-form-item>

    <el-form-item>
    <div style="width: 100%;">
    <div>家属信息</div>
    <el-button type="primary" @click="addFamily">添加家属</el-button>
        <el-table :data="data.family" style="width: 100%">
 
    <el-table-column prop="name" label="姓名"/>
    <el-table-column prop="mobile" label="电话"/>
    <el-table-column prop="state" label="性别">
        <template #default="scope">
             {{ scope.row.gender ==1 ? '男' : '女' }}
      </template>
    </el-table-column>
   
    <el-table-column fixed="right" label="操作" width="220">
      <template #default="scope">
      
        <el-button @click="edit(scope.$index)">
          修改
        </el-button>
        <el-button @click="del(scope.$index)">
          删除
        </el-button>
      </template>
    </el-table-column>
    </el-table>
</div>
    </el-form-item>
 
    <el-form-item>
      <el-button type="primary" @click="submit()">提交</el-button>
    </el-form-item>
  </el-form>
  <AddFamily  :model="editData" v-if="isAdd" @add="addHandle" @close="closeHandle"></AddFamily>
  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted, toRaw} from 'vue'
import AddFamily from '../components/AddFamily.vue';
const isAdd=ref(false);

const editData=ref({});

const editIndex=ref(-1);


const data=reactive({
      
      "name": "",
      "mobile": "",
      "gender": null,
      "birthday": null,
      "status": "",
      "idCard": "",
      "roomRequire": " ",
      "content": " ",
      "state": 1,
      "source": "",
      family: []
  })

  const submit=()=>{

    console.log(toRaw(data));
    

  }
  const closeHandle=()=>{
    isAdd.value=false;
  }
  const addFamily=()=>{
    editIndex.value=-1;
    editData.value={};
    isAdd.value=true;
  }
  const addHandle=(val:any)=>{

  
if( editIndex.value==-1){
    data.family.push(val);
}
else{
    data.family[editIndex.value]=val;
}

    isAdd.value=false;



  }

  const del=(index)=>{
    data.family.splice(index,1);
  }

  const edit=(index)=>{
    editIndex.value=index;
    isAdd.value=true;
    editData.value= data.family[index];

  }
</script>
<style scoped>
</style>